<!--
 * @description: 作品信息
 * @fileName: index
 * @author: 17076
 * @date: 2025/2/25-上午10:15
 * @version: V1.0.0
-->

<template>
  <base-card>
    <template slot="header">
      <div />
    </template>
    <div class="flex-row">
      <div v-for="item in menus" :key="item.id" class="flex-row square-item">
        <div class="flex-column item-left">
          <h3>{{ item.title }}</h3>
          <div class="flex-row">
            <div
              v-for="button in item['buttons']"
              :key="button['id']"
              class="liner-button"
              @click="handleButton(item,button)"
            >{{ `${button['title']} →` }}</div>
          </div>
        </div>
        <img :src="item.img">
      </div>
    </div>
    <div class="flex-row" style="margin-top: 10px; justify-content: space-between; position: relative">
      <el-tabs v-model="activeTabs" @tab-click="handleTabsClick">
        <el-tab-pane
          v-for="item in tabs"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        />
      </el-tabs>
      <!--筛选视图-->
      <div class="flex-row search-content">
        <el-input v-model="worksName" placeholder="输入作品名称搜索" clearable style="width: 240px" />
        <el-select v-model="descType" placeholder="请选择作品类型" style="margin-left: 10px" @change="fetchData">
          <el-option
            v-for="item in worksTypeList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
        <el-select v-model="sortType" placeholder="请选择排序方式" style="margin-left: 10px" @change="fetchData">
          <el-option
            v-for="item in sortTypeList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
        <div class="flex-column sort-icon">
          <i :class="['el-icon-caret-top', sort === '1' ? 'active' : '']" @click="handleSortChange('1')"/>
          <i :class="['el-icon-caret-bottom', sort === '2' ? 'active' : '']" @click="handleSortChange('2')"/>
        </div>
        <!--      <el-button type="primary" style="margin-left: 10px" @click="handleAdd">新建</el-button>-->
      </div>
    </div>
    <div class="works-content" :style="{ height: $baseTableHeight(60) + 'px' }">
      <el-row v-if="worksList.length > 0" :gutter="40" type="flex">
        <el-col
          v-for="item in worksList"
          :key="item.id"
          :xs="8"
          :sm="8"
          :md="6"
          :lg="6"
          :xl="4"
        >
          <div class="flex-column works-item" @click="handleItem(item)">
            <el-image :src="formatterImage(item['indexFileId'])">
              <div slot="error" class="flex-column flex-center error-content">
                <i class="el-icon-picture-outline" />
                <span>暂无封面</span>
              </div>
            </el-image>
            <p>{{ item.playName }}</p>
            <div class="director-view" @click.stop="handleDirector(item)">导演视图</div>
            <el-dropdown trigger="click" style="position: absolute; right: 20px; top: 18px" @command="handleCommand($event, item)">
              <i class="el-icon-more opera-button" @click.stop />
              <el-dropdown-menu slot="dropdown">
                <!--                <el-dropdown-item icon="el-icon-edit" command="0">编辑</el-dropdown-item>-->
                <el-dropdown-item v-if="activeTabs !== '8'" icon="el-icon-download" command="1">下载</el-dropdown-item>
<!--                <el-dropdown-item v-if="activeTabs !== '8'" icon="el-icon-video-camera" command="2">生成视频</el-dropdown-item>-->
                <el-dropdown-item icon="el-icon-delete" command="3">删除</el-dropdown-item>
                <el-dropdown-item v-if="activeTabs === '8'" icon="el-icon-refresh" command="4">恢复</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-empty v-else description="暂无作品信息" style="height: 100%">
        <template slot="image">
          <img src="@/assets/common/empty_role.png" />
        </template>
      </el-empty>
    </div>
  </base-card>
</template>

<script>
import { baseURL } from '@/config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import {
  delPlayDescInfo,
  delRealPlayDescInfo,
  downloadLensFrame,
  selectPlayDescInfo,
  updatePlayDescInfo
} from '@/api/play'
import { downloadFile } from '@/utils/fileSave'
import WorksIcon from '@/assets/works/works.png'
import AIImage from '@/assets/works/ai_image.png'
import AIVideo from '@/assets/works/ai_video.png'
export default {
  name: 'Index',
  data() {
    return {
      activeTabs: '0',
      tabs: [
        {
          label: '创作中',
          name: '0'
        },
        // {
        //   label: '待审片',
        //   name: '5'
        // },
        {
          label: '已归档',
          name: '6'
        },
        {
          label: '已发布',
          name: '7'
        },
        {
          label: '已删除',
          name: '8'
        }
      ],
      // 菜单
      menus: [
        { id: 0, title: '短剧创作', img: WorksIcon, buttons: [{ id: 0, title: '有剧本', disabled: false }, { id: 1, title: '无剧本', disabled: true }] },
        { id: 1, title: 'AI图片生成', img: AIImage, buttons: [{ id: 0, title: '去创作', disabled: false }] },
        { id: 2, title: 'AI 视频生成', img: AIVideo, buttons: [{ id: 0, title: '去创作', disabled: false }] }
      ],
      // 作品名称
      worksName: '',
      // 作品类型
      descType: '0',
      worksTypeList: [
        { code: '0', name: '全部' },
        { code: '1', name: '图像' },
        { code: '2', name: '视频' },
        { code: '3', name: '短剧' }
      ],
      sortType: '2',
      sortTypeList: [
        { code: '1', name: '更新时间' },
        { code: '2', name: '创建时间' },
        { code: '3', name: '名称' }
      ],
      sort: '2',
      worksList: []
    }
  },
  watch: {
    worksName: {
      handler: function(val) {
        this.fetchData()
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      selectPlayDescInfo({
        createStatus: this.activeTabs,
        playName: this.worksName,
        descType: this.descType === '0' ? null : this.descType,
        orderField: this.sortType,
        desc: this.sort
      }).then(res => {
        this.worksList = res.data.result
      })
    },
    // 按钮组点击
    handleButton(item, button) {
      if (button.disabled) {
        this.$baseMessage.warning('敬请期待')
        return
      }
      if (item.id === 0) {
        this.$router.push({ path: '/skit-creation' })
      } else if (item.id === 1) {
        this.$router.push({ path: '/picture-generation' })
      } else if (item.id === 2) {
        this.$router.push({ path: '/video-generation' })
      }
    },
    // 跳转导演视图
    handleDirector(item) {
      this.$router.push({ path: '/director-view', query: { id: item.id }})
    },
    // 切换标签
    handleTabsClick() {
      this.fetchData()
    },
    // 格式化图片连接
    formatterImage(val) {
      return val ? baseURL + commonDownloadFile + val : ''
    },
    // 排序
    handleSortChange(val) {
      this.sort = val
      this.fetchData()
    },
    // 作品点击
    handleItem(item) {
      this.$router.push({ path: '/skit-creation', query: { id: item.id }})
    },
    // 操作
    handleCommand(type, item) {
      switch (type) {
        case '0':
          this.handleEdit(item)
          break
        case '1':
          this.handleDownload(item)
          break
        case '2':
          this.handleGenerate()
          break
        case '3':
          this.handleDelete(item)
          break
        case '4':
          this.handleRecover(item)
          break
      }
    },
    // 编辑
    handleEdit(item) {
      console.log(item)
    },
    // 下载
    handleDownload(item) {
      console.log(item)
      const loading = this.$baseLoading(-1, '文件导出中,请稍等..')
      downloadLensFrame({ playId: item['id'] }).then(res => {
        loading.close()
        downloadFile(res, item['playName'] + '.zip')
      }).catch(() => {
        loading.close()
      })
    },
    // 生成视频
    handleGenerate() {
      this.$baseMessage.warning('敬请期待')
    },
    // 删除
    handleDelete(item) {
      const content = this.activeTabs === '8' ? '确定删除该组作品吗？删除后将无法找回！' : '确定删除该组作品吗？删除后可在已删除中恢复。'
      this.$baseConfirm(content, '提示', async() => {
        // 判断当前是否是已删除状态
        let res = null
        if (this.activeTabs === '8') {
          res = await delRealPlayDescInfo([item.id])
        } else {
          res = await delPlayDescInfo(item.id)
        }
        const { code, msg } = res
        code === 200 ? this.$baseMessage.success(msg || '删除成功') : this.$baseMessage.error(msg || '删除失败')
        this.fetchData()
      })
    },
    // 恢复
    handleRecover(item) {
      this.$baseConfirm('确定恢复该组作品吗？', '提示', async() => {
        const { code, msg } = await updatePlayDescInfo({ ...item, dataStatus: '1' })
        code === 200 ? this.$baseMessage.success(msg || '恢复成功') : this.$baseMessage.error(msg || '恢复失败')
        this.fetchData()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.square-item {
  flex: 1;
  background: #272C36;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 100px;
  justify-content: flex-end;
  &:nth-child(2) {
    margin: 0 20px;
  }
  &:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #2C4BFF, #04FFE0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
  }
  .item-left {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    z-index: 1;
    right: 40%;
    justify-content: space-around;
  }
  img {
    width: 40%;
    height: 100%;
    border-radius: 8px;
  }
  .liner-button {
    min-width: 20px;
    max-height: 26px;
    font-size: 12px;
    line-height: 26px;
    margin-left: 0;
    margin-right: 10px;
  }
}
.search-content {
  position: absolute;
  top: 10px;
  right: 30px;
  .sort-icon {
    margin-left: 8px;
    padding: 3px 0;
    justify-content: space-between;
    i {
      cursor: pointer;
    }
    .active {
      color: $base-color-default
    }
  }
}
.works-content {
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  .works-item {
    margin-bottom: 20px;
    position: relative;
    align-items: center;
    cursor: pointer;
    .el-image {
      width: 100%;
      height: 300px;
      border-radius: 8px;
    }
    p {
      font-size: 14px;
      line-height: 20px;
    }
    .director-view {
      position: absolute;
      background: rgba(0, 0, 0, 0.5);
      top: 8px;
      left: 8px;
      padding: 8px 15px;
      border-radius: 5px;
      font-size: 12px;
      color: #fff;
    }
  }
}
::v-deep {
  .el-row {
    flex-wrap: wrap;
  }
}
</style>
